{$layout}

{$var "header"}
<script src="/js/autocomplete.vue.js" type="text/javascript"></script>
{$end}

<div style="padding-top:1em">
    <form class="ui form add-form" data-tea-action=".add" autocomplete="off">
        <table class="ui table definition">
            <tr>
                <td class="title">名称</td>
                <td>
                    <input type="text" name="description" v-model="description" maxlength="100"/>
                    <p class="comment">给此服务起一个易懂的名字，比如 "负载均衡001"</p>
                </td>
            </tr>
            <tr>
                <td>绑定的域名 <i class="icon edge"></i> </td>
                <td>
                    <input type="text" name="name" v-model="name" placeholder="域名1 域名2 ..."/>
                    <p class="comment">用户可以访问的域名，多个域名之间使用空格隔开，可以使用星号通配符（*）来表示匹配一组域名，比如<em>www.example.com *.google.com</em></p>
                </td>
            </tr>
            <tr>
                <td>绑定的网络地址 <i class="icon paper plane outline"></i> </td>
                <td>
                    <input type="text" name="listen" v-model="listen" placeholder="IP1:端口1  IP2:端口2 ..."/>
                    <p class="comment">绑定的服务器端的网络地址，多个地址之间使用空格隔开，比如"0.0.0.0:80 192.168.1.100:8080"。</p>
                    <p class="comment" style="padding:0">要想通过服务器的所有IP地址都能访问到服务，可以将IP地址写成<em>"0.0.0.0:端口"</em>。</p>
                    <p class="comment" style="padding:0">请确保地址中的端口没有被其他服务所占用，你也可以先行配置端口，再停掉占用该端口的其他服务。</p>
                </td>
            </tr>
            <tr>
                <td>服务类型</td>
                <td>
                    <select class="ui dropdown" name="serviceType" v-model="serviceType">
                        <option value="1">代理服务</option>
                        <option value="2">普通的Web服务</option>
                    </select>
                    <p class="comment" v-if="serviceType == 1">通过TeaWeb将用户请求转发到一个或一组后端服务器中，通常可以实现负载均衡和反向代理服务。</p>
                    <p class="comment" v-if="serviceType == 2">通过TeaWeb分发服务上的静态文件，之后也可以通过配置路径规则来实现动态内容的分发，比如Fastcgi。</p>
                    <p class="comment" style="padding:0">这里的服务类型只是方便你快速添加代理服务，成功添加后可以任意修改配置。</p>
                </td>
            </tr>
            <tr v-if="serviceType == 1">
                <td>后端服务器地址 <i class="icon hdd outline"></i> </td>
                <td>
                    <input type="text" name="backend" v-model="backend" placeholder="比如 IP1:端口1  IP2:端口2" />
                    <p class="comment">实际提供服务的后端服务器地址，多个地址之间使用空格隔开，比如"192.168.1.100:8080  192.168.1.101:8080"。</p>
                    <p class="comment" style="padding:0">应配置好防火墙或者其他设置，以确保TeaWeb所在服务器可以正常访问到这些地址。</p>
                </td>
            </tr>
            <tr v-if="serviceType == 2">
                <td>网站根目录</td>
                <td>
                    <auto-complete-path-box name="root" placeholder="比如 /home/www/mysite" maxlength="100" value=""></auto-complete-path-box>
                    <p class="comment">请确保目录是相对于服务器文件系统的根目录的绝对路径。</p>
                </td>
            </tr>
        </table>

        <button class="ui button primary" type="submit">确定添加</button>
    </form>

    <div style="height:10em"></div>
</div>